<template>
  <el-card class="body">
    <div slot="header">
      <span>拖拽表格</span>
      <el-button style="float: right; padding: 3px 0;" type="text">表格设置</el-button>
    </div>
    <el-table :data="tableData" border row-key="date" class="draggable-table" style="width: 100%">
      <el-table-column prop="sortNo" label="序号">
        <template slot-scope="{ index }">
          <span>{{ index }}</span>
          <!-- <img class="handle" :src="require('./image.png')" width="30px" height="30px" /> -->
        </template>

      </el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </el-card>

</template>

<script>
import Sortable from 'sortablejs'

export default {
  components: {},
  data() {
    return {
      tableData: [
        { date: '2025-01-01', name: '张三', address: '二七区' },
        { date: '2025-02-01', name: '李四', address: '中原区' },
        { date: '2025-03-01', name: '王五', address: '高新区' },
        { date: '2025-04-01', name: '马六', address: '管城区' },
        { date: '2025-05-01', name: 'Mary', address: '金水区' }

      ]
    }
  },
  created() { },
  mounted() {
    const tbody = document.querySelector('.draggable-table .el-table__body-wrapper tbody')
    console.log('SSSSS', tbody)
    new Sortable(tbody, {
      handle: '.handle',
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        console.log('QQQQQ', newIndex, oldIndex)
      }
    })
  },
  beforeDestroy() { },
  methods: {}

}

</script>

<style scoped>
.body {
  width: 800px;
  height: 500px;
  /* border: 1px solid red; */
}
.handle {
  cursor: move;
  display: flex;
  align-content: center;
  object-fit: contain;
}
</style>